<template>
  <div>
    <v-card class='' fluid id="inspire">
    <v-app-bar
      class='white--text'
      color="primary"
    >
      <v-app-bar-nav-icon class='white--text' @click="drawer = true"></v-app-bar-nav-icon>
      <v-toolbar-title>{{currentTitle}}</v-toolbar-title>
      <v-spacer/>
      <v-btn
        v-if="currentComponent!=='images-tag-iterator'"
        @click='uploadDialog=true'
        class='rounded-xl gray lighten-4'>上传图片</v-btn>
    </v-app-bar>
    <v-navigation-drawer
      v-model="drawer"
      absolute
      temporary
      class="pt-4 "
      color="accent"
      mini-variant
      expand-on-hover
    >
      <v-list>
      <v-list-item link>
        <v-list-item-content class='white--text'>
          <v-list-item-title class="text-h6">
            @{{user.name}}
          </v-list-item-title>
          <v-list-item-subtitle>{{user.email}}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      </v-list>

      <v-divider></v-divider>

      <v-list
        nav
        dense
      >
        <v-list-item-group
          v-model="selectedNavItem"
          color="primary"
        >
          <v-list-item
            v-for='item in navItems'
            :key='item.id'
            active-class='white--text'
          >
            <v-list-item-icon>
              <v-icon>{{item.icon}}</v-icon>
            </v-list-item-icon>
            <v-list-item-title>{{item.title}}</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <v-main class='pt-0'>
      <!--  -->
      <component
        :is='currentComponent'
        :images='images'
        :user='user'
        @freshList='getImagesList'
      />
    </v-main>
  </v-card>
    <image-upload-dialog
      :dialog='uploadDialog'
      :isGroup="currentComponent==='images-group-iterator'"
      :groups='groups'
      @on-save='getImagesList'
      @on-change-dialog='(val)=>this.uploadDialog = val'
    />
  </div>
</template>

<script>
  import imagesIterator from '@/components/album/ImagesIterator'
  import imagesTagIterator from '@/components/album/ImagesTagIterator'
  import imagesGroupIterator from '@/components/album/ImagesGroupIterator'
  import imagesApi from '@/api/apiPath/imagesApi'
  import imageUploadDialog from '@/components/album/ImageUploadDialog'
  import groupApi from '@/api/apiPath/groupApi'

  export default {
    name: 'Album',
    props: {
      user: {
        default: {}
      }
    },
    components: {
      imageUploadDialog,
      imagesIterator,
      imagesTagIterator,
      imagesGroupIterator
    },
    data() {
      return {
        uploadDialog: false,
        drawer: false,
        selectedNavItem: 0,
        groups: [],
        images: [],
        currentComponent: 'images-iterator',
        currentTitle: '我的相册',
        navItems: [
          { id: 1,icon: 'mdi-folder',title: '我的相册',component: 'images-iterator' },
          { id: 2,icon: 'mdi-tag-multiple',title: '标签相册',component: 'images-tag-iterator' },
          { id: 3,icon: 'mdi-account-multiple',title: '团队相册',component: 'images-group-iterator' }
        ]
      }
    },
    watch: {
      selectedNavItem: {
        handler(val) {
          this.currentTitle = this.navItems[val].title || ''
          this.currentComponent = this.navItems[val].component || ''
        }
      }
    },
    async mounted() {
      // await this.getImagesList()
      await this.getGroups()
    },
    methods: {
      async getGroups() {
        const { data: result } = await groupApi.getGroupList({ id: this.user.id })
        this.groups = result
      },
      async getImagesList(obj) {
        let result
        console.log('-----------')
        if (obj) {
          result = await imagesApi.getFileList(obj)
        } else {
          result = await imagesApi.getFileList()
        }
        result.data.forEach((item) => {
            item.name = item.name.split('/')[1]
        })
        this.images = result.data
        this.$toast.info('获取图片成功')
        }
      },
      changeDialog(val) {
        this.uploadDialog = val
      },
      changeNav(val) {
        this.currentComponent = val
      }
  }
</script>

<style scoped>
  #inspire{
    min-height: 800px;
  }
</style>
